<template>
    <s-layout id="layout" :title="'客户管理'" navbar="normal" leftIconColor="#333" :autoBack="true" :bgColor="'#ffffff'"
        :tabbarshow='false' :titleStyle="{ color: '#333', fontSize: '32rpx', fontWeight: '600' }">
        <!-- 最大盒子 -->
        <view class="max-box" :style="{ paddingTop: (safeAreaInsets?.top + 44) + 'px' }">
            <!-- banner图 -->
            <view class="banner area"
                :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff/weitu01.png)` }">
                <!-- 切换部门 -->
                <view class="project" @tap="projectSwitch">
                    <view class="project_title"> {{ project_title == '' ? '全部部门' : project_title }} </view>
                    <view class="project_switch">
                        <image :src="`${baseUrl}/uploads/uniapp_image/staff/xuanze.png`" mode="scaleToFill" />
                    </view>
                </view>
                <!-- 文字 -->
                <view class="content"> 弘扬社会公平，共建社会和谐 </view>
            </view>
            <!-- 搜索组件 -->
            <!-- <view class="area">
                <s-search-keyword :placeholder="'搜索客户'" @searchKeyWord="searchKeyWord"></s-search-keyword>
            </view> -->
            <!-- 列表 -->
            <view class="list_box area">
                <scroll-view scroll-y enhanced :show-scrollbar="false" @scrolltolower="scrolltolower" :refresher-enabled="isOpenRefresh" :refresher-triggered="triggered"
                    :refresher-threshold="100" refresher-background="white" @refresherpulling="onPulling"
                    @refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort"
                    @scroll="onScroll">
                    <!-- 列表项 -->
                    <view v-if="customerManagementList.length != 0">
                        <!-- 部门块 -->
                        <view class="project_piece" v-for="item of customerManagementList" :key="item.id">
                            <!-- 部门名称 -->
                            <view class="project_name">
                                <view class="check_project_box" @tap="moreSelect(item.id)">
                                    <!-- 选择 -->
                                    <view class="check_button">
                                        <image v-show="isSelected(item.id)"
                                            :src="`${baseUrl}/uploads/uniapp_image/staff/kehuguanli_icon_check.png`"
                                            mode="scaleToFill" />
                                        <image v-show="!isSelected(item.id)"
                                            :src="`${baseUrl}/uploads/uniapp_image/staff/kehuguanli_icon_checkfor.png`"
                                            mode="scaleToFill" />
                                    </view>
                                    {{ item.department.name }}
                                </view>

                                <!-- 详情 -->
                                <view class="particulars"
                                    @tap="alterCustomer(item.id, item.department.name, item.department.company.name)">
                                    <image :src="`${baseUrl}/uploads/uniapp_image/staff/kehuguanli_icon_search.png`"
                                        mode="scaleToFill" />
                                </view>
                            </view>

                            <view class="list_item" v-for="(v, c) of item.customerdata" :key="v.id">
                                <!-- 信息 -->
                                <view class="message">
                                    <!-- 头像 -->
                                    <view class="head_portrait">
                                        <up-avatar size="45" :src="v.award" shape="circle"></up-avatar>
                                    </view>
                                    <!-- 信息盒子 -->
                                    <view class="message_box">
                                        <!-- 标题 -->
                                        <view class="title">{{ v.name }}</view>
                                        <!-- 职位 -->
                                        <view class="position">职位：{{ v.post }}</view>
                                        <!-- 电话盒子 -->
                                        <view class="phone_box" @tap="dialPhone(item.customerdata[c].mobile)">
                                            <!-- 电话标 -->
                                            <view class="phone_sign">
                                                <image
                                                    :src="`${baseUrl}/uploads/uniapp_image/staff/kehuguanli_icon_callnumber.png`"
                                                    mode="scaleToFill" />
                                            </view>
                                            <!-- 手机号码 -->
                                            <view class="phone_number">电话：{{ v.mobile }} </view>
                                        </view>
                                    </view>
                                </view>
                            </view>

                        </view>

                        <!-- 正在加载组件 -->
                        <view>
                            <s-loadmore-gather :current_page="Customer_current_page" :last_page="Customer_last_page"
                                ref="loadmoreRef"></s-loadmore-gather>
                        </view>
                    </view>
                    <!-- 缺醒图 -->
                    <view class="unawakening_box" v-else>
                        <up-empty :text="' '" :marginTop="61" :width="141" :height="141"
                            :icon="`${baseUrl}/uploads/uniapp_image/staff/kehuguanli_img_nodate@2.png`">
                            <view class="accretion_box">
                                <text>暂无数据</text>
                            </view>
                        </up-empty>
                    </view>

                </scroll-view>
            </view>
            <!-- 底部占位盒子 -->
            <view class="placeholder_bottom"></view>
            <view class="end_box">
                <!-- 全选按钮盒子 -->
                <view class="check_all_box">
                    <!-- 全选按钮 -->
                    <view class="check_all_button" @tap="checkProject">
                        <view class="select_image">
                            <image v-show="checkAll == 1"
                                :src="`${baseUrl}/uploads/uniapp_image/staff/kehuguanli_icon_check.png`"
                                mode="scaleToFill" />
                            <image v-show="checkAll == 0"
                                :src="`${baseUrl}/uploads/uniapp_image/staff/kehuguanli_icon_checkfor.png`"
                                mode="scaleToFill" />
                        </view>
                        <view>全选</view>
                    </view>
                    <!-- 已选择 -->
                    <view class="selected_box">
                        <view class="number_people">已选择 {{ selectedIds.length }}/{{ total }} 部门</view>
                    </view>
                </view>
                <!-- 按钮集合大盒子 -->
                <view class="button_box">
                    <view class="button_item_box" @tap="transferStaff">
                        <view class="turn_over">选择移交</view>
                    </view>
                    <view class="button_item_box" @tap="newCustomer">
                        <view class="new_client">新增客户</view>
                    </view>
                </view>

                <view class="placeholder"></view>
            </view>
        </view>
    </s-layout>

    <!-- 底部弹出组件 && 部门弹出 -->
    <s-project-class @selectedData="switchTitle" @subcomponentSearch="subcomponentSearch" :arrayList="projectDataList"
        ref="popupListRef" :searchBoxIsShow="false" :showGoLink="false"></s-project-class>
    <!-- 岗位弹出  -->
</template>

<script setup>
import sheep from '@/sheep';
import { ref, reactive } from 'vue';
import { onLoad, onShow, onUnload } from '@dcloudio/uni-app';
import { baseUrl } from "@/sheep/config";
import tools from '@/sheep/helper/tools.js';
const { safeAreaInsets } = uni.getSystemInfoSync()
const popupListRef = ref()
const customerManagementList = ref([])
const selectProject = ref(0)

onLoad(() => {
    let params = {
        is_all: '0',
        is_include_main: '1',
    }
    projectList(params)
    project_title == ''
    customerManagementList.value = []
    selectedIds.value = []  // 数据刷新就将选中状态清空
    everyPage.value = 1
    customerIndexData()

})



// 搜索
const searchKeyWord = (srarch_value) => {
    customerManagementList.value = []
    customerIndexData();
}

// 切换部门
const projectSwitch = () => {
    popupListRef.value.open()
}

// 调用接口：客户管理列表
const total = ref()
const Customer_current_page = ref()
const Customer_last_page = ref()
const everyPage = ref(1)
const customerIndexData = async () => {
    let params = {
        filter: JSON.stringify({
            department_id: department_id.value,
            // name: srarch_value,
        }),
        op: JSON.stringify({
            department_id: '=',
            // name: 'LIKE',
        }),
        page: everyPage.value,
    };
    const res = await sheep.$api.customer.customerIndexAPI(params);
    customerManagementList.value = [...customerManagementList.value, ...res?.data.rows]
    total.value = res.data.total
    Customer_current_page.value = res.data.current_page
    Customer_last_page.value = res.data.last_page
};

// 调用接口：获取部门列表
const projectDataList = ref([])
// 封装部门列表接口
const projectList = async (params = null) => {
    const res = await sheep.$api.app.getDepartment(params);
    projectDataList.value = res.data;

};



const loadmoreRef = ref()
// 客户列表分页
const scrolltolower = () => {
    // loadmoreRef.value.PopupScrolltolower()
    if (Customer_current_page.value < Customer_last_page.value) {
        everyPage.value += 1
    } else {
        return;
    }
    customerManagementList.value = []
    customerIndexData()
}

// 搜索部门列表
const subcomponentSearch = (value) => {
    projectDataList.value = []
    let params = {
        filter: JSON.stringify({
            title: value,
        }),
        op: JSON.stringify({
            title: 'LIKE',
        })
    };
    projectList(params);
}

// 拨打电话
const dialPhone = (mobile) => {
    tools.callPhone(mobile)
}

// 已选中多少条
// const Selected = ref(0)
const checkAll = ref(0)
// 多选交互逻辑
const selectedIds = ref([])
const moreSelect = (id) => {
    const index = selectedIds.value.indexOf(id);
    if (index === -1) {
        selectedIds.value.push(id);
        if (selectedIds.value.length == total.value) {
            checkAll.value = 1
        }
    } else {
        selectedIds.value.splice(index, 1);
        if (selectedIds.value.length !== total.value) {
            checkAll.value = 0
        }
    }
}

const isSelected = (id) => {
    return selectedIds.value.includes(id);
}

// 全选交互逻辑
const checkProject = () => {
    if (checkAll.value === 0) {
        selectedIds.value = customerManagementList.value.map(item => item.id);
        checkAll.value = 1;
    } else {
        selectedIds.value = [];
        checkAll.value = 0;
    }
}

const project_title = ref('')
const department_id = ref()
// 子组件触发的方法将部门title改变
const switchTitle = (item) => {
    customerManagementList.value = []
    selectedIds.value = []
    checkAll.value = 0
    project_title.value = item.jointTitles
    department_id.value = item.id
    customerManagementList.value = []
    everyPage.value = 1
    customerIndexData();
}

// 新增客户
const newCustomer = () => {
    sheep.$router.go('/subpackage/staff/workbench/client_management/customer_add');
}

// 移交员工
const transferStaff = () => {
    if (selectedIds.value.length == 0) {
        uni.showToast({
            title: '请先勾选部门',
            icon: 'none'
        })
        return false
    }
    sheep.$router.go(`/subpackage/staff/workbench/client_management/transfer_staff?ids=${selectedIds.value}`);
}

// 修改 详情
const alterCustomer = (id, title, e) => {
    sheep.$router.go(`/subpackage/staff/workbench/client_management/customer_edit?id=${id}&title=${title}/${e}`);
}
// 页面下拉刷新
const freshing = ref(false)
const triggered = ref(false)
const isOpenRefresh = ref(true)  // 是否开启下拉
// 自定义下拉刷新控件被下拉
const onPulling = (e) => {
    if (e.detail.deltaY < 0) return  // 防止上滑页面也触发下拉
    triggered.value = true;
}
// 自定义下拉刷新被触发
const onRefresh = () => {
    if (freshing.value) return;
    freshing.value = true;
    setTimeout(() => {
        customerManagementList.value = []
        triggered.value = false;
        freshing.value = false;
        everyPage.value = 1
        customerIndexData();
    }, 500);
}
// 自定义下拉刷新被复位
const onRestore = () => {
    triggered.value = 'restore'; // 需要重置
    // console.log("onRestore");
}
// 自定义下拉刷新被中止
const onAbort = () => {
    // console.log("onAbort");
}
</script>

<style lang="scss" scoped>
.max-box {
    width: 100%;
}

.area {
    width: calc(100% - 40rpx);
    // padding: 0 20rpx;
    margin: 0 20rpx;
}

// 缺醒图盒子
.unawakening_box {

    // 插槽盒子
    .accretion_box {
        width: 100%;
        height: 35rpx;
        font-family: PingFangSC;
        font-weight: $uni-font-weight;
        font-size: $uni-font-size-sm;
        font-style: normal;
        text-decoration: none;
        text-align: center;
        line-height: 35rpx;
        color: #c0c4cc;
    }
}

// banner图
.banner {
    height: 182rpx;
    margin: 20rpx;
    background-size: cover;
    /* 背景图片铺满整个盒子 */
    background-position: center;

    /* 背景图片居中显示 */
    // 项目切换盒子
    .project {
        display: flex;
        width: calc(100% - 54rpx);
        height: 56rpx;
        padding: 40rpx 14rpx 12rpx 40rpx;

        // 项目名称
        .project_title {
            height: 100%;
            font-family: PingFangSC;
            color: $uni-text-color;
            font-weight: 700;
            font-size: 40rpx;
            font-style: normal;
            text-decoration: none;
            text-align: left;
            max-width: 90%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        // 切换按钮
        .project_switch {
            width: 26rpx;
            height: 100%;

            image {
                width: 26rpx;
                height: 26rpx;
                padding: 14rpx 0 0 14rpx;
            }
        }
    }

    // 文字内容
    .content {
        width: calc(100% - 40rpx);
        font-family: PingFangSC;
        color: $uni-text-color;
        font-weight: 700;
       font-size:$uni-font-size-26;
        font-style: normal;
        text-decoration: none;
        padding-left: 40rpx;
    }
}



// 末尾盒子 (此盒子没有  “父相 ” 如要改动请按需更改)
.end_box {
    position: fixed;
    bottom: 0;
    height: 244rpx;
    width: 100%;

    // 全选按钮盒子
    .check_all_box {
        height: 80rpx;
        width: 100%;
        background-color: #ffffff;
        display: flex;
        justify-content: space-between;
        border: 2rpx solid #efefef;

        // 全选按钮
        .check_all_button {
            display: flex;
            margin-left: 52rpx;
            align-items: center;
            font-family: PingFangSC;
            color: #0239f7;
            font-weight: $uni-font-weight;
            font-size: $uni-font-size-base;
            font-style: normal;
            text-decoration: none;
        }

        // 已选择
        .selected_box {
            display: flex;
            margin-right: 40rpx;
            align-items: center;
            font-family: PingFangSC;
            color: $uni-text-color;
            font-weight: $uni-font-weight;
            font-size: $uni-font-size-base;
            font-style: normal;
            text-decoration: none;
        }
    }

    // 按钮集合大盒子
    .button_box {
        background-color: #ffffff;
        display: flex;
        height: 128rpx;
        width: 100%;
        justify-content: space-between;

        .button_item_box {
            width: calc(50% - 80rpx);
            padding: 18rpx 40rpx 20rpx 40rpx;

            // 选择移交按钮
            .turn_over {
                width: 315rpx;
                height: 90rpx;
                border-radius: 45rpx;
                border: 2rpx solid $uni-color-primary;
                font-family: PingFangSC;
                color: $uni-color-primary;
                font-weight: $uni-font-weight;
                font-size: 34rpx;
                font-style: normal;
                text-decoration: none;
                text-align: center;
                line-height: 90rpx;
            }

            // 新增客户按钮
            .new_client {
                width: 315rpx;
                height: 92rpx;
                border-radius: 45rpx;
                background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
                font-family: PingFangSC;
                color: #FFFFFF;
                font-weight: $uni-font-weight;
                font-size: 34rpx;
                font-style: normal;
                text-decoration: none;
                text-align: center;
                line-height: 92rpx;
            }
        }
    }

    // 占位盒子
    .placeholder {
        height: 32rpx;
        width: 100%;
        background-color: #ffffff;
    }
}

// 列表盒子
.list_box {
    margin-top: 20rpx;
    // height: 800rpx;
    height: 58vh;
    width: calc(100% - 98rpx);
    background-color: #ffffff;
    padding: 20rpx 30rpx 0rpx 28rpx;
    // padding: 20rpx;
    border-radius: 16rpx;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);

    scroll-view {
        height: 100%;
    }
}

// 列表盒子内部样式
.project_piece {
    width: 100%;
    height: 100%;

    // 项目名称
    .project_name {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 44rpx;
        width: 100%;
        font-family: PingFangSC;
        color: $uni-text-color;
        font-weight: $uni-font-weight;
        font-size: $uni-font-size-big;
        font-style: normal;
        text-decoration: none;
        margin-top: 22rpx;
    }

    // 列表项
    .list_item {
        display: flex;
        width: 100%;
        height: 164rpx;
        border-bottom: 2rpx solid #efefef;
        align-items: center;

        // 信息
        .message {
            width: calc(100% - 50rpx);
            height: 100%;
            display: flex;
            align-items: center;

            // 头像
            .head_portrait {
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
                margin-right: 40rpx;

                image {
                    width: 100%;
                    height: 100%;
                }
            }

            // 信息盒子
            .message_box {
                width: calc(100% - 110rpx);
                height: calc(100% - 62rpx);
                padding: 30rpx 0 32rpx 0;
                margin-left: 10rpx;

                // 标题
                .title {
                    width: 100%;
                    font-family: PingFangSC;
                    color: $uni-text-color;
                    font-weight: $uni-font-weight;
                    font-size: 30rpx;
                    font-style: normal;
                    text-decoration: none;
                    white-space: nowrap;
                    /* 不换行 */
                    overflow: hidden;
                    /* 超出内容隐藏 */
                    text-overflow: ellipsis;
                    /* 超出内容显示省略号 */
                }

                // 职位
                .position {
                    font-family: PingFangSC;
                    color: #999999;
                    font-weight: 400;
                    font-size: 22rpx;
                    font-style: normal;
                    text-decoration: none;
                    margin: 8rpx 0 10rpx 0;
                }

                // 电话盒子
                .phone_box {
                    height: 32rpx;
                    display: flex;

                    // 电话标
                    .phone_sign {
                        width: 32rpx;
                        height: 32rpx;
                        margin-right: 10rpx;

                        image {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    // 手机号码
                    .phone_number {
                        font-family: PingFangSC;
                        color: $uni-color-primary;
                        font-weight: 400;
                        font-size: 22rpx;
                        font-style: normal;
                        text-decoration: none;
                        line-height: 32rpx;
                    }
                }
            }
        }
    }
}

// 详情
.particulars {
    height: 50rpx;
    width: 50rpx;

    image {
        width: 100%;
        height: 100%;
    }
}


// 全选图标
.select_image {
    width: 36rpx;
    height: 36rpx;
    margin-right: 22rpx;

    image {
        width: 100%;
        height: 100%;
    }
}

// 底部占位盒
.placeholder_bottom {
    height: 220rpx;
    width: 100%;
    margin-top: 20rpx;
}

// 项目选择盒子
.check_project_box {
    display: flex;
    align-items: center;
}

// 选择按钮
.check_button {
    margin-top: 10rpx;
    width: 36rpx;
    height: 36rpx;
    // margin: 0 30rpx;
    margin: 0 20rpx 0 0;

    image {
        width: 100%;
        height: 100%;
    }
}
</style>